<template>
  <div class="addUser">
    <el-dialog center :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="130px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户名" prop="name">
              <el-input v-model.trim="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model.trim="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="个人邮箱">
              <el-input v-model.trim="form.email" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="工作邮箱" prop="email_work">
              <el-input v-model.trim="form.email_work" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="密码" prop="password">
              <el-input v-model.trim="form.password" type="text" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="全职/兼职" prop="type" v-if="form.role_id == 2">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="全职" value="全职"></el-option>
                <el-option label="兼职" value="兼职"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" v-no-more-click:3000>确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import { addUser } from "~/api/user";

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("请输入正确手机号"));
        } else {
          callback();
        }
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入工作邮箱"));
      } else {
        if (
          !/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
            value
          )
        ) {
          callback(new Error("请输入正确工作邮箱"));
        } else {
          callback();
        }
      }
    };
    return {
      dialogFormVisible: false,
      form: {
        role_id: "5",
        email_work: ""
      },
      title: "添加代理人",
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码最少6位数", trigger: "blur" }
        ],
        email_work: [
          { required: true, validator: checkEmail, trigger: "blur" }
        ],
        type: [
          { required: true, message: "请输入全职或者兼职", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    showDialog(typeId) {
      this.dialogFormVisible = true;
      //代理人
      if (typeId == 2) {
        this.title = "添加代理人";
        this.form.role_id = typeId;
      }
      //审核员
      if (typeId == 3) {
        this.title = "添加审核员";
        this.form.role_id = typeId;
      }
      //审核员
      if (typeId == 4) {
        this.title = "添加专属顾问";
        this.form.role_id = typeId;
      }
      if (typeId == 7) {
        this.title = "添加子管理员";
        this.form.role_id = typeId;
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addUser(this.$axios, this.form)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.$emit("changeList");
                this.resetForm("ruleForm");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error");
          return false;
        }
      });
    },
    handleClose() {
      this.resetForm("ruleForm");
    },
    // handleClose() {

    //   this.resetForm("ruleForm");
    // },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.form = {};
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less">
.addUser {
  .el-select {
    width: 100%;
  }
  .el-dialog {
    max-width: 900px;
  }
}

</style>
